<div class="applicationList" *ngIf="!loading">
    <nz-row>
        <nz-col [nzSpan]="8">
            <h3>List of applications in the project</h3>
        </nz-col>
        <nz-col [nzSpan]="8" class="center">
            <button nz-button nzType="primary" [routerLink]="['./application']"
                [disabled]="!project.permissions.writable">Create a new application</button>
        </nz-col>
        <nz-col [nzSpan]="8">
            <app-input-autofocus [model]="filter" (modelChange)="filterChanged($event)"></app-input-autofocus>
        </nz-col>
    </nz-row>
    <nz-row *ngIf="project.application_names && project.application_names.length > 0" [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32 }">
        <nz-col class="cardContainer" [routerLink]="['./application', app.name]" *ngFor="let app of filteredApplications" [nzSpan]="6">
            <app-card [title]="app.name" [description]="app.description" [image]="app.icon"></app-card>
        </nz-col>
    </nz-row>
    <nz-row *ngIf="!project.application_names || project.application_names.length === 0">
        <nz-col [nzSpan]="24">
            <nz-alert nzType="info" nzMessage="No application"></nz-alert>
        </nz-col>
    </nz-row>
</div>
<nz-spin *ngIf="loading" nzTip="Loading applications..."></nz-spin>
